import Vue from "vue";
import Vuex from "vuex";
import Mock from "mockjs";

import moduleA from "./modules/module1"
import moduleB from "./modules/module2"

Vue.use(Vuex);

export default new Vuex.Store({
  // 状态属性
  state: {
    name: "lixx",
    count: 1,
    list: [
      {
        id: 1,
        name: "张三",
        sex: 1,
      },
      {
        id: 2,
        name: "李四",
        sex: 1,
      },
      {
        id: 3,
        name: "王五",
        sex: 0,
      },
    ],
  },
  // getters：对state的数据进行过滤
  getters: {
    // 对list进行过滤
    filterList(state, getters) {
      getters;
      // 返回过滤后的list
      return state.list.map((item) => {
        // 修改item后返回新的item
        item.sexName = item.sex == 0 ? "女" : "男";
        return item;
      });
    },
  },
  // 修改状态方法：不能执行异步操作
  mutations: {
    increment(state, payload) {
      state.count += payload;
    },
    decrement(state, payload) {
      state.count -= payload;
    },
    // 更新list方法
    updateList(state, payload) {
      state.list = payload;
    },
  },
  // 先执行一些异步操作之后再操作mutation
  actions: {
    // context类似于实例环境
    // 传入的负载参数
    getList(context, payload) {
      payload;
      // mock模拟异步数据获取
      setTimeout(() => {
        // 返回的是一个对象,获取对象中的data并且赋值给list
        const {data: list} = Mock.mock({
          // 生成data属性数据返回3-10条数据
          "data|3-10": [
            {
              // 属性id是一个自增数据，起始值1每次增加1
              "id|+1": 1,
              // name属性为@cname生成的随机中文名
              "name": "@cname()",
              // sex随机从数组中取一个值
              "sex|1": [1, 0],
            },
          ],
        });
        // 修改状态
        context.commit("updateList", list);
      }, 1000);
    },
    // 传递参数
    getList2(context, payload) {
      // 异步模拟获取数据
      setTimeout(() => {
        const { data: list } = Mock.mock({
          // es6语法：动态变量-通过数组方式写成变量
          [`data|${payload? payload: '3-10'}`]: [
            {
              "id|+1": 1,
              "name": "@cname",
              "sex|1": [0, 1]
            }
          ]
        });
        // 修改状态
        context.commit("updateList", list);
      }, 1000);
    },
    // Promise模拟
    getList3(context, payload) {
      // 返回一个promise对象
      return new Promise((resolve, reject) => {
        reject;
        setTimeout(() => {
          const { data: list } = Mock.mock({
            // es6语法：动态变量-通过数组方式写成变量
            [`data|${payload? payload: '3-10'}`]: [
              {
                "id|+1": 1,
                "name": "@cname",
                "sex|1": [0, 1]
              }
            ]
          });
          // 修改状态
          context.commit("updateList", list);
          // 返回成功
          resolve();
        }, 3000);
      });
    }
  },
  // 模块化部署-防止数据文件过大
  modules: {
    moduleA,
    moduleB
  },
});
